<script setup lang="ts">
import { computed } from 'vue';
import { App } from 'ant-design-vue';
import { useSect, useWallet } from '../../../composables';
import { EVENTS, GameKernel } from '../../../game';
import SectInfo from './sect-info.vue';

const emit = defineEmits<{
  (e: 'change-scene', id: string): void;
}>();

const { modal } = App.useApp();

const { state: sectState } = useSect();
const { state: walletState } = useWallet();

const currentSectInfo = computed(() => {
  return sectState.value.sectList.find(
    (item) => item.config.id === sectState.value.currentSect
  );
});

const sectSpotConfig = computed(() => {
  return sectState.value.sectSpotConfig;
});

function onBackClick() {
  emit('change-scene', 'sect-main');
}

function onAddCountClick() {
  modal.confirm({
    title: '提示',
    content: `确定要花费 [${Math.floor(
      walletState.value.balances.SPIRIT_STONE
    )}/1000 灵石] 增加 720 次修炼次数吗？`,
    okText: '确定',
    cancelText: '取消',
    centered: true,
    okButtonProps: {
      disabled: walletState.value.balances.SPIRIT_STONE < 1000,
    },
    onOk: () => {
      GameKernel.inst.bus.emit(EVENTS.SECT_CULTIVATION_SPOT_ADD_VALID_COUNT);
    },
  });
}
</script>

<template>
  <div v-if="currentSectInfo" class="w-full h-full flex flex-col">
    <div class="flex-none py-2 text-lg font-bold text-center relative">
      <div class="absolute left-2 top-1/2 transform -translate-y-1/2">
        <a-button @click="onBackClick">返回</a-button>
      </div>
      <div>{{ currentSectInfo.config.name }} - 修炼场</div>
    </div>
    <div class="flex-none border-0 border-t border-solid border-border p-2">
      <sect-info></sect-info>
    </div>
    <div class="flex-1 overflow-auto p-2">
      <a-card v-if="sectSpotConfig">
        <div class="flex flex-col gap-2">
          <div class="font-bold text-base">{{ sectSpotConfig.name }}</div>
          <div class="text-gray-400">{{ sectSpotConfig.description }}</div>
          <div>
            效果：每次修炼完成获取修为提升
            {{ Math.floor((sectSpotConfig.cultivationMultiplier - 1) * 100) }}%
          </div>
          <div>消耗灵石：{{ sectSpotConfig.stoneConsumption }} / 720 次</div>
          <div>剩余有效次数：{{ sectState.cultivationSpotValidCount }} 次</div>
          <div class="flex justify-center">
            <a-button @click="onAddCountClick">增加次数</a-button>
          </div>
        </div>
      </a-card>
      <a-card v-else>
        <div class="text-center">无</div>
      </a-card>
    </div>
  </div>
</template>
